<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<title>test touch event</title>
	<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="iscroll-probe.js"></script>
	<style>
		body {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
		#test {
			position: fixed;
			left:0;
			right:0;
			top: 0;
			min-height: 60px;
			z-index: 99;
			
		}
		#scroll {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			overflow: hidden;
			/*
			overflow: auto;
			-webkit-overflow-scrolling: touch;
			*/
		}
		ul {
			margin: 0;
			padding: 0;
		}
		ul>li,ol>li {
			min-height: 30px;
			background: #00ff00;
			
		}
		ul>li:nth-of-type(2n),ol>li:nth-of-type(2n){
			background: #ff0000;
		}
		input[type=text] {
			-webkit-appearance: none;
			padding: 5px;
		}
	</style>
</head>
<body>
	<div id="test">
	</div>
	<div id="scroll" >
		<ol>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
			<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
		</ol>
	</div>
	
	
	<script>
		var raf = window.requestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.mozRequestAnimationFrame
    || window.msRequestAnimationFrame
    || function(cb) { return window.setTimeout(cb, 1000 / 60); };
    var myIS;
		$(function(){
			/*
			$('#scroll').on('scroll', function(){
				var curScrollTop = $(this).scrollTop();
				$('#test').text(curScrollTop);
			});
			*/
			/*
			setInterval(function(){
				var curScrollTop = $('#scroll').scrollTop();
				$('#test').text(curScrollTop);
			}, 1000 / 60);
			*/
			myIS = new IScroll('#scroll');
			myIS.on('scroll', function(){
				$('#test').text(this.y);
			});
			var recursiveCheckScroll = function(){
				raf(function(){
					recursiveCheckScroll();
					var curScrollTop = myIS.y;
					$('#test').text(curScrollTop);
				});
			};
			recursiveCheckScroll();
		});
	</script>
</body>
</html>

